<template>

  <el-dialog
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    title="阅卷情况"
    width="60%"
    top="5vh"
    @close="handleClose"
  >
    <div class="app-container">
      <data-table
        ref="pagingTable"
        :options="options"
        :list-query="listQuery"
      >

        <template #data-columns>
          <el-table-column
            label="试卷ID"
            prop="paperId"
            show-overflow-tooltip
          />


          <el-table-column
            label="阅卷人"
            align="center"
          >
            <template v-slot="{ row }">
              <span v-if="row.userId==='user'">指定的人员范围</span>
              <span v-if="row.userId==='role'">有权限的阅卷老师</span>
              <span v-else>{{ row.userId_dictText }}</span>
            </template>

          </el-table-column>

          <el-table-column
            label="阅卷状态"
            prop="reviewState_dictText"
            align="center"
          />

          <el-table-column
            label="指派时间"
            align="center"
            prop="createTime"
            width="180px"
          />

          <el-table-column
            label="批阅时间"
            prop="reviewTime"
            align="center"
            width="180px"
          />

          <el-table-column
            label="给分明细"
            align="center"
          >
            <template v-slot="{ row }">

              <el-link icon="el-icon-view" type="primary" @click="handleDetail(row.userId)">查看</el-link>

              <el-link v-permission="['exam:review:paper:audit']" :disabled="row.reviewState===0 || settleState===1" style="margin-left: 10px" icon="el-icon-refresh-right" type="danger" @click="handReject(row.id)">退回阅卷</el-link>

            </template>

          </el-table-column>


        </template>

      </data-table>
    </div>

  </el-dialog>


</template>

<script>

import { reject } from '@/api/exam/review/paper'
import permission from '@/directive/permission'

export default {
  name: 'MatchDialog',
  directives: { permission },
  props: {
    examId: String,
    settleState: Number,
    paperId: String,
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,

      listQuery: {
        current: 1,
        size: 10,
        params: {
          id: ''
        }
      },

      options: {
        // 可批量操作
        multi: false,
        // 列表请求URL
        listUrl: '/api/exam/review/match/paging-by-paper'
      }
    }
  },
  watch: {

    // 检测查询变化
    visible: {
      handler() {
        this.dialogVisible = this.visible
      },
      deep: true
    },

    paperId: {
      handler() {
        this.listQuery.params.id = this.paperId
      },
      deep: true
    }
  },
  created() {
    this.listQuery.params.id = this.$route.query.paperId
  },

  methods: {
    handleClose() {
      this.$emit('update:visible', false)
    },

    // 查看当前用户阅卷情况
    handleDetail(reviewBy) {
      const routeData = this.$router.resolve({ name: 'ReviewAuditDetail', query: {
        examId: this.examId,
        paperId: this.paperId,
        reviewBy: reviewBy
      }})
      // 新窗口打开
      window.open(routeData.href, '_blank')
    },

    // 退回
    handReject(id) {
      this.$confirm('确实要退回让阅卷老师重新批阅吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        reject({ matchId: id, reason: '管理员退回' }).then(() => {
          this.$message.success('退回操作成功！')
          this.$refs.pagingTable.refresh()
        })
      })
    }
  }
}
</script>
